<template>
  <div>
    <div
      style="
        margin-top: 20px;
        margin-left: 20px;
        font-weight: 600;
        font-size: 18px;
        display: flex;
        align-items: center;
      "
    >
      <span>储蓄卡</span>
      <el-button
        @click="saveCardMoney()"
        type="primary"
        size="mini"
        style="margin-left: auto; margin-right: 10px"
        >保存</el-button
      >
    </div>
    <div style="display: flex; flex-wrap: wrap">
      <div
        style="margin: 15px 0 0 15px"
        v-for="(item, index) in credit_cards"
        :key="index"
      >
        <div class="container">
          <div class="card">
            <div class="Information" style="display: flex; align-items: center">
              <span style="width: 55px">余额：</span>
              <div class="form">
                <input
                  v-model="item.money"
                  class="input"
                  placeholder="Value"
                  required=""
                  type="number"
                />
              </div>
            </div>
            <span class="number">{{ returnCardNum(item.number) }}</span>
            <el-tooltip
              class="item"
              effect="dark"
              content="复制到粘贴板"
              placement="top"
            >
              <i
                class="el-icon-document copy"
                @click="copy(item.number)"
                v-if="!(item.number == '-')"
              ></i>
            </el-tooltip>
            <span class="owner">{{ item.bank }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import mixin from "@/mixin/index.js";
export default {
  components: {},

  mixins: [mixin],
  props: {},
  created() {},
  methods: {
    saveCardMoney() {
      let table = [...this.credit_cards];
      let sum = 0;
      for (let i = 0; i < table.length; i++) {
        sum = this.numAdd(sum, table[i].money);
      }
      this.$parent.$parent.returnCardMoney(sum);
    },
    returnCardNum(num) {
      return num.replace(/(.{4})/g, "$1 ");
    },
    moneyFormatter(key) {
      // 提交勾选计算时的金额格式化 **全部页面共用**
      function number_format(number, decimals, dec_point, thousands_sep) {
        number = (number + "").replace(/[^0-9+-Ee.]/g, "");
        var n = !isFinite(+number) ? 0 : +number,
          prec = !isFinite(+decimals) ? 0 : Math.abs(decimals),
          sep = typeof thousands_sep === "undefined" ? "," : thousands_sep,
          dec = typeof dec_point === "undefined" ? "." : dec_point,
          s = "",
          toFixedFix = function (n, prec) {
            var k = Math.pow(10, prec);
            return "" + Math.ceil(n * k) / k;
          };
        s = (prec ? toFixedFix(n, prec) : "" + Math.round(n)).split(".");
        var re = /(-?\d+)(\d{3})/;
        while (re.test(s[0])) {
          s[0] = s[0].replace(re, "$1" + sep + "$2");
        }
        if ((s[1] || "").length < prec) {
          s[1] = s[1] || "";
          s[1] += new Array(prec - s[1].length + 1).join("0");
        }
        return s.join(dec);
      }
      return "$ " + number_format(key, 2, ".", ",");
    },
    copy(copyValue) {
      let url = copyValue;
      let oInput = document.createElement("input");
      oInput.value = url;
      document.body.appendChild(oInput);
      oInput.select(); // 选择对象;
      console.log(oInput.value);
      document.execCommand("Copy"); // 执行浏览器复制命令
      this.$message({
        message: "复制成功",
        type: "success",
      });
      oInput.remove();
    },
  },
  data() {
    return {
      credit_cards: [
        {
          bank: "中国工商银行",
          type: "储蓄卡",
          number: "6222033803012668358",
          password: "010709",
          money: 0,
        },
        {
          bank: "中国建设银行",
          type: "储蓄卡",
          number: "6217002390034905429",
          password: "010709",
          money: 0,
        },
        {
          bank: "华夏银行",
          type: "储蓄卡",
          number: "6230200197180610",
          password: "010709",
          money: 0,
        },
        {
          bank: "邮储银行",
          type: "储蓄卡",
          number: "6217974520002394990",
          password: "010709",
          money: 0,
        },
        {
          bank: "山东农信",
          type: "储蓄卡",
          number: "6223200258031834",
          password: "010709",
          money: 0,
        },
      ],
    };
  },
};
</script>

<style scoped>
.span {
  width: 50px;
  /* margin-right: 5px; */
}

.Information {
  display: flex;
  position: absolute;
  top: 20px;
  left: 20px;
}

.Information div div {
  display: flex;
  margin-right: 10px;
  margin-bottom: 2px;
}

.copy {
  position: absolute;
  right: 15px;
  bottom: 52px;
  cursor: pointer;
}

::selection {
  background-color: rgba(0, 0, 0, 0);
}

.container {
  /* position: absolute;
    left: 50%;
    top: 50%; */
  /* transform: translate(-50%, -50%); */
}

.card {
  background: white;
  width: 300px;
  height: 200px;
  border-radius: 5px;
  position: relative;
  box-shadow: 3px 3px 7px 0px rgba(0, 0, 0, 0.55);
  color: black;
}

.card .number,
.card .owner {
  display: block;
  position: absolute;
  left: 20px;
  cursor: default;
  opacity: 0.9;
  transition: color 0.7s ease-out;
}

.card .number {
  bottom: 50px;
  letter-spacing: 1px;
}

.card .owner {
  bottom: 20px;
  letter-spacing: 1px;
}

.input {
  color: black;
  font-size: 20px;
  width: 70%;
  box-sizing: border-box;
  border: none;
  background: white;
}

/* Hover on Input */
input:hover {
  background: white;
}

input:focus {
  outline: none;
}

input:focus ~ .input-border {
  width: 100%;
}
</style>
